<template>
  <MesBox
    title="超领申请"
    v-model="visible"
    :width="1000"
    :height="500"
    :onModelClose="onModelClose"
  >
    <MesForm
      ref="myForm"
      :formFields="formFields"
      :formRules="formRules"
    ></MesForm>
    <MesHeader icon="el-icon-s-grid" title="待生成物料需求清单"></MesHeader>
    <MesTable
      ref="table"
      index
      :columns="columns"
      :tableData="tableData"
    ></MesTable>
    <template #footer>
      <el-button type="primary" @click="save">
        <i class="el-icon-check"></i>
        保存
      </el-button>
    </template>
  </MesBox>
</template>

<script setup>
import MesBox from '@/components/basic/MesBox.vue'
import MesForm from '@/components/basic/MesForm.vue'
import MesHeader from '@/components/basic/MesHeader.vue'
import MesTable from '@/components/basic/MesTable.vue'
import { getCurrentInstance, ref } from 'vue'

const emit = defineEmits(['parentCall'])
const myForm = ref(null)
const table = ref(null)
const that = getCurrentInstance().appContext.config.globalProperties
let visible = ref(false)
let formFields = ref({
  WoCode: '',
})
const formRules = [
  [
    {
      title: '工单号',
      field: 'WoCode',
      type: 'select',
      dataKey: 'WoCode',
      extra: {
        render: () => {
          return (
            <el-button
              type="success"
              onClick={() => {
                myForm.value.validate(async (valid) => {
                  if (valid) {
                    let res = await that.http.get(
                      `/api/Production_WorkOrder/GetChildrenByWoCodeChild?WoCodeChild=${formFields.value.WoCode}`,
                      null,
                      true
                    )
                    tableData.value = res
                  }
                })
              }}
            >
              <i class="el-icon-search"></i>查 询
            </el-button>
          )
        },
      },
    },
  ],
]

const columns = [
  {
    title: '产品名称',
    field: 'productName',
  },
  {
    title: '产品编码',
    field: 'productCode',
  },
  {
    title: '产品规格',
    field: 'productStandard',
  },
  {
    title: '单位',
    field: 'unit_Id',
    bind: {
      key: 'unitList',
    },
  },
  {
    title: '超领数量',
    field: 'qty',
    edit: {
      type: 'number',
      min: 1,
    },
  },
]

let tableData = ref([])

const open = () => {
  visible.value = true
}

const save = async () => {
  let selectList = table.value.getSelected()
  if (selectList.length == 0) return that.$message.error('请勾选需要生成的物料')
  try {
    let children = selectList.map((item) => {
      if (!item.qty) throw new Error('请填写数量')
      let { productCode, productName, qty } = item
      return {
        productCode,
        productName,
        qty,
      }
    })

    let res = await that.http.post(
      '/api/Production_WorkOrder/CreateWorkAl',
      {
        woCodeChild: formFields.value.WoCode,
        children,
      },
      true
    )

    if (res.status) {
      visible.value = false
      onModelClose()
      that.$message.success('物料需求单开具成功')
      emit('parentCall', ($parent) => {
        $parent.search()
      })
    }
  } catch (error) {
    that.$message.error(error.message)
  }
}

const onModelClose = () => {
  formFields.value.WoCode = ''
  tableData.value = []
}

defineExpose({ open })
</script>

<style lang="less" scoped></style>
